<template>
  <div class="app-container table-app-container">
    <div class="fixed-table">
      <div class="fixed-table-actionbar">
        <TableFilter ref="filterForm" :kw="kw" @on-filter="searchContext" />
      </div>
      <PageableTable
        ref="myTable"
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight "
        class="fixed-table-table"
        :multiple-selected="true"
        @page-change="onPageChange"
        @sort-change="onSortChange"
      >
        <el-table-column v-for="column in insideColumns" :key="column.key" :min-width="120" :label="column.title" :prop="column.key">
          <template slot-scope="scope">
            <column-render v-if="column.render" :render="column.render" :row="scope.row" :column="column" :show-overflow-tooltip="true" />
            <span v-else>{{ scope.row[column.key] || '-' }}</span>
          </template>
        </el-table-column>
      </PageableTable>
    </div>
  </div>
</template>

<script>
import TableFilter from './components/tableFilter'
import PageableTable from '@neu/biz-core/components/PageableTable'
import databind from '@neu/biz-core/mixins/databind'
import { detail as detailByCode } from '@neu/dcom-ui/api/schema'
import { pageBySchema } from '@neu/dcom-ui/api/instance'

export default {
  name: 'CmdbInstancePage',
  components: {
    TableFilter,
    PageableTable
  },
  // 加入混入，使表格混入更多的api操作
  mixins: [databind],
  props: {
    modelCode: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      r: '',
      insideColumns: [
        // { title: 'ID', key: '_id' },
        { title: '唯一标识', key: 'code' },
        { title: '名称', key: 'name' }
        // { title: '模型', key: 'schemadefName' }
      ],
      kw: '' // 模糊查询关键字
    }
  },
  computed: {

  },
  created() {
    console.log(this.modelCode)
    detailByCode(this.modelCode).then(response => {
      this.$route.query.schemadef = response.data
      this.listBySchema(response.data)
    })
    if (this.$route.query.modelCode) {
      this.kw = this.$route.query.modelCode
    }
  },
  methods: {
    listBySchema: async function(data) {
      this.r = pageBySchema(data._id)
      this.filter({ s_kw: this.kw })
    },
    searchContext(query) {
      query = { ...query }
      this.filter(query)
    }
  }
}
</script>
